<template>

    <el-table :data="tableData" 
    :header-cell-style="{'text-align' : 'center'}"
    :cell-style="{'text-align':'center'}">
        <!-- 
            id: 59,
            cpuUtilization: 0.3,
            congestionLevel: 0.3,
            memoryUtilization: 0.4,
            nodeIp: '198.0.0.1',
            target: 0,
            diversionPercentage: 0,
            diversionAmountBits: 0,
            diversion: false
        -->
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="cpuUtilization" label="CPU利用率" width="100" />
        <el-table-column prop="congestionLevel" label="拥塞" />
        <el-table-column prop="memoryUtilization" label="内存利用率" width="100"/>
        <el-table-column prop="nodeIp" label="节点IP" width="150"/>
        <el-table-column prop="target" label="目标" />
        <el-table-column prop="diversionPercentage" label="分流百分比" width="100" />
        <el-table-column prop="diversion" label="是否分流" />
        <el-table-column label="操作" width="100">
            <el-popconfirm title="Are you sure to delete this?" @confirm="handleDelete">
                <template #reference>
                    <el-button text warning>删除</el-button>
                </template>
            </el-popconfirm>

        </el-table-column>
    </el-table>

</template>

<script lang="ts" setup>
import { useNodeDataStore } from '../store/node_data';
import { storeToRefs } from 'pinia';
import { reactive, ref } from "vue";
import { RuleForm } from "element-plus";
let usenodes = useNodeDataStore();
let tableData = storeToRefs(usenodes).nodes;

const form = reactive<InstanceType<typeof RuleForm>>({
    id: '',
    nodeIp: ''
})


let dialogVisible = ref(false);
let handleConfirm = () => {
    // 向后端发起请求【增加节点】，成功后更新tableData
    // tableData.value.push(form)
    dialogVisible.value = false
}

let handleDelete = () => {
    // 向后端发起请求【删除节点】，成功后更新tableData
}

</script>
<style scoped>
.el-table {
    --el-table-border-color: rgb(157, 195, 255);
    --el-table-current-row-bg-color: rgba(26, 82, 223, 0);
    --el-table-header-bg-color: rgba(0, 0, 0, 0);
    --el-table-bg-color: rgba(0, 0, 0, 0);
    --el-table-tr-bg-color: rgba(0, 0, 0, 0);
    background-color: #002fff;
    color: #00af89;
    font-size: 14px;
}
</style>